<script setup>
	import {
		ImagePreview
	} from 'vant';
	import 'vant/es/image-preview/style';
	const VanImagePreview = ImagePreview.Component;

	function preview() {
		ImagePreview({
			images: [
				'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
			],
			closeable: true,
		});
	}
</script>

<template>
	
	<van-skeleton>
	  <template #template>
	    <div :style="{ display: 'flex', width: '100%' }">
	      <van-skeleton-image />
	      <div :style="{ flex: 1, marginLeft: '16px' }">
	        <van-skeleton-paragraph row-width="60%" />
	        <van-skeleton-paragraph />
	    
	      </div>
	    </div>
	  </template>
	</van-skeleton>

	
	<div class="mag">
		<van-image round width="100px" height="100px" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
	</div>

	<div class="body">
		<span class="Font" style="font-size: 15px;">我的订单</span>
		<van-cell-group class="space">
			<van-grid :column-num="4">
				<van-grid-item icon="photo-o" text="全部" />
				<van-grid-item icon="photo-o" text="待付款" badge="3" />
				<van-grid-item icon="photo-o" text="待发货" badge="3" />
				<van-grid-item icon="photo-o" text="待收货" badge="3" />
			</van-grid>


		</van-cell-group>
		<span class="Font" style="font-size: 15px;">基本资料</span>
		<van-cell-group class="space">
			<van-cell title="个人资料" is-link />
			<van-cell title="收货地址" is-link />
			<van-cell title="关于" is-link />
		</van-cell-group>
	</div>

	<van-tabbar v-model="active" active-color="blue">
		<van-tabbar-item icon="home-o">主页</van-tabbar-item>
		<van-tabbar-item icon="search">分类</van-tabbar-item>
		<van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
		<van-tabbar-item icon="setting-o">个人中心</van-tabbar-item>
	</van-tabbar>

</template>


<style>
	.bottom-button {
		color: darkorange;
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
	}

	.body {
		padding-top: 50px;
		background-color: whitesmoke;
		height: 650px;
	}
	.mag {
		padding-top: 20px;
		padding-left: 20px;
		padding-bottom: ;
		background-color: whitesmoke;
		height: 80px;
	}

	.space {
		margin-top: 10px;
		margin-bottom: 10px;
		margin-left: 10px;
		margin-right: 10px;
	}

	.Font {
		margin-top: 30px;
		margin-bottom: 30px;
		margin-left: 28px;
	}
</style>
